<template>
	<view class="content">
		<view class="formBox">
			<view class="title">基础信息</view>
			<view class="f-c-fs">
				<view class="label">展示区域：</view>
				<view class="value">{{detail.showArea==1?'商城':'门店服务'}}</view>
			</view>
			<view class="f-c-fs" v-if="detail.showArea==1">
				<view class="label">商品类型：</view>
				<view class="value">{{detail.goodsType==60?'套餐':detail.goodsType==61?'卡卷':detail.goodsType==59?'商品':'--'}}</view>
			</view>
			<view class="f-c-fs" v-if="detail.showArea==2">
				<view class="label">服务类型：</view>
				<view class="value">{{detail.serverType==1?'洗车':detail.serverType==2?'钣喷':detail.serverType==3?'保养':''}}</view>
			</view>
			<view class="f-c-fs" v-if="detail.showArea==2">
        <view class="label">服务标签：</view>
        <view class="value">{{ detail.serverLabel }}</view>
      </view>
			<view class="f-c-fs">
				<view class="label">商品/服务名称：</view>
				<view class="value">{{detail.goodsServerName}}</view>
			</view>
			<view class="f-c-fs" >
				<view class="label">商品图片：</view>
				<view class="f-c-sa">
          <image v-for="(item,index) in detail.goodsUrls" :key="index"
                 :src="imagePath+item"
                 style="width: 150rpx;height: 150rpx;margin: 20rpx;"
                 @click="privewImg(imagePath+item)"></image>
        </view>
			</view>
      <view class="f-c-fs" v-if="detail.showArea==2">
        <view class="label" style="flex:2;">商品/服务介绍：</view>
        <view class="value" style="flex:6;">{{ detail.explain ? detail.explain : '--' }}</view>
      </view>
      <view class="f-c-fs" v-if="detail.showArea==2">
        <view class="label" style="flex:2;">购买须知：</view>
        <view class="value" style="flex:6;">{{ detail.notice ? detail.notice : '--' }}</view>
      </view>

    </view>
    <view v-if="detail.showArea == 1&&detail.goodsType!=59" class="formBox">
      <view class="title">商品/服务项目</view>

      <view v-for="(item, index) in shopList" :key="index" class="list1">
        <view class="f-c-sb name-wrapper">
          <view class="name">{{ item.name }}</view>
          <view class="f-c-fs">
            <!-- <u-icon name="edit-pen-fill" style="margin-right: 15rpx;" color="#999999" size="40" @click="addShop(2, index)"></u-icon> -->
            <!-- <u-icon name="trash-fill" color="#999999" size="40" @click="deletShop(index)"></u-icon> -->
          </view>
        </view>
        <view class="info">
          <view class="f-c-fs num">
            <view class="label">
              原价：
              <text class="value">￥{{ item.oldPrice }}</text>
            </view>
            <view class="label">
              数量：
              <text class="value">{{ item.number }}</text>
            </view>
          </view>
          <view>
            <view class="">描述（20字符）</view>
            <view>{{ item.content }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="formBox">
      <view class="title">购买信息</view>
      <view class="f-c-fs">
        <view class="label">支付方式：</view>
        <view class="value">{{ detail.buyWay == 1 ? '货币购买' : '积分兑换' }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">原价：</view>
        <view class="value">{{ detail.costPrice }}</view>
      </view>
			<view class="f-c-fs">
        <view class="label">{{ detail.buyWay == 1 ? '现价' : '积分' }}：</view>
        <view class="value">{{ detail.nowPrice }}</view>
      </view>
      <!--			<view class="f-c-fs">
              <view class="label">剩余数量：</view>
              <view class="value">{{detail.surplusNumber}}</view>
			</view>-->
			<view class="f-c-fs">
				<view class="label">虚拟购买人数：</view>
        <view class="value">{{ detail.inventedNumber }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">库存：</view>
        <view class="value">{{ detail.stockNumber }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">是否支持退款：</view>
        <view class="value">{{ detail.isRefund == 1 ? '不支持' : '支持' }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">使用方式：</view>
        <view class="value">
          {{ detail.useWay == 1 ? '邮寄' : detail.useWay == 2 ? '到店核销' : detail.useWay == 3 ? '到店自提' : '' }}
        </view>
      </view>
      <view class="f-c-fs">
        <view class="label">使用门店：</view>
        <view class="value" @click="show=true">点击查看使用门店</view>
      </view>

    </view>
    <view class="formBox">
      <view class="title">商品详情介绍</view>
      <u-parse :html="detail.details"></u-parse>
    </view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					<view class="item boxShadow" v-for="(item, index) in selectList" :key="item.storeId">
						<view class="f-c-fs">
							<view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view>
						</view>
						<view class="item-title f-c-sb">
							<view>{{ item.storeName }}</view>
							<!-- <u-checkbox @change="checkboxChange1(index, item.checkbox, item.storeId)" v-model="item.checkbox"></u-checkbox> -->
						</view>
						<view class="info">{{ item.address }}</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
import {goodsserverDetail, showStoreList} from '@/api/index'

export default {
  data() {
    return {
	  imagePath:this.$imagePath,
      id: '',
      detail: {},
      show: false,
      selectList: [],
      shopList: []
    }
  },
  onLoad(option) {
    this.id = JSON.parse(option.param).id
			this.getdetail()
		},
		onShow() {
			
		},

		methods: {
      privewImg(src) {
        uni.previewImage({
          current: src, // 当前显示图片的http链接
          urls: [src] // 需要预览的图片http链接列表
        });
      },
      getdetail() {
        goodsserverDetail({gsId: this.id}).then(res => {
          console.log(res)
          this.detail = res.data
          this.getSelectList()
          if (this.detail.goodsUrl.indexOf(',') != -1) {
            this.detail.goodsUrls = this.detail.goodsUrl.split(',')
          } else {
            this.detail.goodsUrls = [this.detail.goodsUrl]
          }
          this.shopList = this.detail.gsDtos
        })
			},
			getSelectList(){
				showStoreList({storeId:this.detail.useStores}).then(res=>{
					res.data.forEach((val,index)=>{
						res.data[index].checkbox=true
					})
					this.selectList=res.data
				})
			},
	
		}
	}
</script>

<style lang="less" scoped>
.formBox{
	.f-c-fs{
		border-bottom: 1px solid #efefef;
	}
	.label{
		margin: 15rpx 0;
	}
}
.list {
	width: 100%;
	.item {
		width: 660rpx;
		height: 231rpx;
		background: #ffffff;
		border-radius: 18rpx;
		margin: 23rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		.color {
			width: 110rpx;
			height: 36rpx;
			opacity: 1;
			background: #177fff;
			border-radius: 6rpx;
			font-size: 24rpx;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 36rpx;
			margin-right: 18rpx;
			&.color1 {
				background: #177fff;
			}
			&.color2 {
				background: #ff6738;
			}
			&.color3 {
				background: #f54170;
			}
			&.color4 {
				background: #2db2ad;
			}
		}
	}
	.item-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #131313;
    margin: 20rpx 0;
  }

  .info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666666;
    line-height: 36rpx;
  }
}

.list1 {
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding-bottom: 40rpx;

  .f-c-fs {
    border: none;
  }

  .name {
    font-size: 28rpx;
    font-weight: 700;
    text-align: left;
    color: #131313;
    line-height: 36px;
  }

  .info {
    line-height: 50rpx;

    .label {
      width: 50%;
      line-height: 80rpx;
    }
  }
}
</style>
